<template>
  <PageContent inner-border :padding="false">
    <template slot="toolbar">
      <ActionButton @click="onValidate" icon="planar-drxx07" content="保存" />
      <div style="flex:1"></div>
    </template>
    <Form
      ref="form"
      :model="formDynamic"
      :label-width="80"
      class="editor-forms"
    >
      <FormItem
        label="字典名称"
        prop="name"
        :rules="{required: true, message: '必填项', trigger: 'blur'}"
      >
        <Input type="text" v-model="formDynamic.name" placeholder="填写字典名称..." />
      </FormItem>
      <Row v-for="(item, index) in dictItems" :key="index" :gutter="8">
        <Col span="10">
          <FormItem
            label="字典标识"
            :prop="'items.' + index + '.dictKey'"
            :rules="{ validator:validator, trigger: 'blur'}"
          >
            <Input type="text" v-model="item.dictKey" placeholder="填写字典标识..." />
          </FormItem>
        </Col>
        <Col span="10">
          <FormItem label="字典内容">
            <Input
              type="text"
              v-model="item.dictValue"
              placeholder="填写字典内容..."
            />
          </FormItem>
        </Col>
        <Col span="4">
          <Button type="error" @click="onRemove(index)">删除</Button>
        </Col>
      </Row>
      <FormItem>
        <Button type="dashed" long @click="createNewItem" icon="md-add">添加新项</Button>
      </FormItem>
    </Form>
  </PageContent>
</template>

<script>
import mixin from "./mixin";
export default {
  mixins: [mixin],
  data() {
    return {
      index: 0,
      formDynamic: {
        name: "",
        items: [],
      },
    };
  },
  computed: {
    dictItems() {
      return this.formDynamic.items.filter((p) => p.status);
    },
  },
  watch: {
    params: {
      immediate: true,
      deep: true,
      handler(value) {
        this.parseParams(value);
      },
    },
  },
  methods: {
    parseParams(params) {
      const { dict, dictName } = params || { dict: {}, dictName: "" };
      const keys = Object.keys(dict);
      this.index = keys.length + 1;
      this.formDynamic.name = dictName;
      this.formDynamic.items = keys.map((p, i) => {
        return {
          dictKey: p,
          dictValue: dict[p],
          index: i + 1,
          status: 1,
        };
      });
    },
    onSubmit() {
      const { items, name } = this.formDynamic;
      this.config.dict[name] = items
        .filter((p) => p.status)
        .reduce((s, p) => {
          s[p.dictKey] = p.dictValue;
          return s;
        }, {});
      this.$emit("change", this.config);
    },
    onValidate(name) {
      this.$refs.form.validate((valid) => {
        valid && this.onSubmit();
      });
    },
    createNewItem() {
      this.index++;
      this.formDynamic.items.push({
        dictKey: "",
        dictValue: "",
        index: this.index,
        status: 1,
      });
    },
    onRemove(index) {
      this.formDynamic.items[index].status = 0;
    },
    validator(rule, value, callback, source, options) {
      const items = this.formDynamic.items.filter((p) => p.dictKey == value);
      if (items.length > 1) {
        return callback(new Error("存在相同标识"));
      } else {
        return callback();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.editor-forms {
  margin-top: 8px;
  padding: 8px;
  width: 600px;
}
</style>
